<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="stylesheet" href="../../../static/layui/css/layui.css"
          media="all"/>
    <link rel="stylesheet" href="../../../static/css/public.css" media="all"/>
    <link rel="stylesheet"
          href="../../../static/plugin/zTree/css/zTreeStyle/zTreeStyle.css"
          type="text/css">
    <style>

        #main{

        float: left;
        }
        #fenlei{
            float: left;
        }
    </style>

</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <!--<div class="layui-inline">
                <label class="layui-form-label" id="chsCount1"></label>
                <label class="layui-input-block">
                    <a class="layui-btn hidden-btn" data-type="reload">对账</a>
                </label>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" id="chsCount2"></label>
                <div class="layui-input-block">
                    <a class="layui-btn layui-btn-normal insert-btn">添加</a>
                </div>
            </div>-->
            <!--<div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <select id="chgCp" lay-verify="required" lay-filter="chgCp">
                        <option value="0">全部</option>
                        <option value="1">收入</option>
                        <option value="-1">支出</option>
                    </select>
                </div>
            </div>-->
            <div class="layui-inline">
                <label class="layui-form-label" id="allCount"> </label>
                <div class="layui-input-block">
                    <a id="pre-btn" class="layui-btn pre-btn layui-btn-danger" style="display: none;"
                       data-type="reload">《</a>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <select id="cptMth" lay-filter="cptMth"></select>
                </div>
            </div>
            <div class="layui-inline">
                <label> </label>
                <div class="layui-input-block">
                    <a id="next-btn" class="layui-btn next-btn layui-btn-danger" style="display: none;"
                       data-type="reload">》</a>
                </div>
            </div>
        </form>
    </blockquote>
<div style="margin: 0 auto;overflow: hidden;padding-left: 270px;">
    <div id="main" style="width: 400px;height:400px;"></div>
    <div id="fenlei" style="width: 400px;height:400px;"></div>
</div>
    <div id="gr" style="width: 800px;height:400px;padding-left: 270px;margin-top: 50px"></div>
       <div id="shouzhi" style="width: 800px;height:500px;padding-left: 270px;margin-top: 50px"></div>
    <div id="shouzhi1" style="width: 800px;height:500px;padding-left: 270px;margin-top: 50px"></div>

</form>
<div id="treeDiv" class="menuContent"
     style="display: none; position: absolute; background: white; border: 1px black solid; z-index: 999">
    <ul id="departmentTree" class="ztree"
        style="margin-top: 0; width: 160px;"></ul>
</div>
<script type="text/javascript"
        src="../../../static/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../../static/layui/layui.js"></script>
<script type="text/javascript"
        src="../../../static/custom/js/common.js"></script>
<script type="text/javascript"
        src="../../../static/plugin/zTree/js/jquery.ztree.core.js"></script>
<script src="../../../static/js/echarts/echarts-all-3.js"></script>
<script type="text/javascript">
    let tabDatas;    //全部table中数据
    let incDatas = [];  //table中收入数据
    let outDatas = [];  //table中支出数据
    let countDatas;   //
    let cntRow = 0;    //对账选中多少行
    let sumRow = 0;     //对账选中行合计

    layui.use(['form', 'layer', 'table', 'laytpl'],
        function () {


            // myChart.setOption(option);

            let listApi = '../../../monthlyreport/byDepartment';
            let listApi1 = '../../../monthlyreport/byfenlei';
            let listApi2 = '../../../monthlyreport/byGR';
            let listApi3 = '../../../monthlyreport/bySRZC';

            let toInsertHtml = 'insert.html';
            let cfmApi = '../../../accounting/cwReceivables/cfm';
            let deleteApi = '../../../accounting/cwReceivables/delete';
            var form = layui.form, layer = parent.layer === undefined ? layui.layer
                : top.layer;
            var pram = merger(constant.page.toUri(),
                getsearchVal());
            var myChart = echarts.init(document.getElementById('main'));
            var fenLei = echarts.init(document.getElementById('fenlei'));
            var gr = echarts.init(document.getElementById('gr'));
            var shouzhi = echarts.init(document.getElementById('shouzhi'));
            var shouzhi1 = echarts.init(document.getElementById('shouzhi1'));
            listLoad(pram);
            function listLoad(data){
                loadAjax(listApi, "get", data, function (response) {

                    myChart.setOption({
                        title: {
                            text: '部门工资',

                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: response.data.datas ,
                        },
                        series: [
                            {

                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: response.data.datas,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]

                    })

                    if (response.data.navi) {
                        naviObj = response.data.navi
                        if (response.data.navi.pre) {
                            $("#pre-btn").show();
                        }
                        if (response.data.navi.next) {
                            $("#next-btn").show();
                        }
                        $("#cptMth").empty();
                        // 月份导航下拉框
                        console.log(response.data.navi)
                        $.each(response.data.navi.selectAll, (i, e) => {
                            console.log(e)
                            console.log(response.data.navi.selectAll)
                            if (response.data.navi.current == e) {
                                $("<option selected>" + e + "</option>").appendTo($("#cptMth"));
                            } else {
                                $("<option>" + e + "</option>").appendTo($("#cptMth"));
                            }
                        })
                    }
                    form.render();
                })
                loadAjax(listApi2, "get", data, function (res1) {
                    gr.setOption({
                        title: {
                            text: '个人工资',

                            left: 'left'
                        },
                        xAxis: {
                            type: 'category',
                            data: res1.data.list2,
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: res1.data.list1,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)'
                            }
                        }]
                    })
                })


                loadAjax(listApi1, "get", data, function (res) {
                    fenLei.setOption({
                        title: {
                            text: '分类',

                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'right',
                            data: ['公积金','基本工资','绩效工资','考勤工资','个人社保'] ,
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [
                                    {name:"公积金",value:res.data.gjj},
                                    {name:"基本工资",value:res.data.jibengongzi},
                                    {name:"绩效工资",value:res.data.jixiaozi},
                                    {name:"考勤工资",value:res.data.kqgongzi},
                                    {name:"个人社保",value:res.data.sb}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]

                    })
                })

                loadAjax(listApi3, "get", data, function (res) {
                    shouzhi.setOption({
                        title: {
                            text: '收入支出',

                            left: 'left'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        legend: {
                            data: ['收入', '支出']
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data:res.data.mth,
                                axisPointer: {
                                    type: 'shadow'
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: ' ',
                                min: 0,
                                max: res.data.maxMoney.maxMoney,
                                interval: 5000,
                                axisLabel: {
                                    formatter: '{value} 元'
                                }
                            },

                        ],
                        series: [
                            {
                                name: '收入',
                                type: 'bar',
                                data: res.data.shouru
                            },
                            {
                                name: '支出',
                                type: 'bar',
                                data: res.data.zhichu
                            }

                        ]

                    })
                })

                loadAjax(listApi3, "get", data, function (res) {
                    shouzhi1.setOption({
                        title: {
                            text: '收入支出',

                            left: 'left'
                        },

                        legend: {
                            data: ['收入', '支出'],

                        },
                        brush: {
                            toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
                            xAxisIndex: 0
                        },
                        toolbox: {
                            feature: {
                                magicType: {
                                    type: ['stack', 'tiled']
                                },
                                dataView: {}
                            }
                        },
                        tooltip: {},
                        xAxis: {
                            data: res.data.mth,
                            name: 'X Axis',
                            axisLine: {onZero: true},
                            splitLine: {show: false},
                            splitArea: {show: false}
                        },
                        yAxis: {
                            inverse: false,
                            splitArea: {show: false}
                        },
                        grid: {
                            left: 100
                        },
                        visualMap: {
                            type: 'continuous',
                            dimension: 1,
                            text: ['High', 'Low'],
                            inverse: true,
                            itemHeight: 200,
                            calculable: true,
                            min: -6,
                            max: 6,
                            top: 60,
                            left: 10,
                            inRange: {
                                colorLightness: [0.4, 0.8]
                            },
                            outOfRange: {
                                color: '#bbb'
                            },
                            controller: {
                                inRange: {
                                    color: '#2f4554'
                                }
                            }

                        },
                        series: [
                            {
                                name: 'bar',
                                type: 'bar',
                                stack: 'one',

                                data: res.data.shouru

                            },

                            {
                                name: 'bar4',
                                type: 'bar',
                                stack: 'two',

                                data: res.data.zhichu1,
                            }
                        ]
                    })

                })
            }


            //资金流水列表
            // listLoad();
            //
            // function listLoad(data) {
            //     var myChart = echarts.init(document.getElementById('main'));
            //     loadAjax(listApi, "get", data, function (data) {
            //        baseCallBack(response, function (response) {
            //             // tabDatas = response.list
            //             // table.reload("list", {
            //             //     data: tabDatas
            //             // })
            //         // $.each(data,function(i,p){
            //         //     label[i]=p['label'];
            //         //     value[i]={'name':p['label'],'value':p['value']};
            //            console.log(response.list)
            //          })
            //
            //
            //             form.render();
            //         // });
            //     });
            // }


            // 搜索【此功能需要后台配合，所以暂时没有动态效果演示】
            $(".pre-btn").on("click", function () {
                listLoad({mth: naviObj.pre});
            });
            $(".next-btn").on("click", function () {
                listLoad({mth: naviObj.next});
            });
            // layUI处理change事件不生效
            form.on('select(cptMth)', function (data) {
                listLoad({mth: $("#cptMth").val()})
            });
            form.on('select(chgCp)', function (data) {
                if ($("#chgCp").val() == 0) {
                    table.reload("list", {data: tabDatas})
                    $("#allCount").html("合计" + tabDatas.length + "条");
                } else if ($("#chgCp").val() == 1) {
                    if (incDatas.length == 0) {
                        // 数组的过滤方法  ，对比下面的循环写法
                        incDatas = tabDatas.filter(e => e.cptacount > 0);
                    }
                    table.reload("list", {data: incDatas})
                    $("#allCount").html("合计" + incDatas.length + "条");
                } else if ($("#chgCp").val() == -1) {
                    if (outDatas.length == 0) {
                        $.each(tabDatas, function (i, v) {
                            if (v.cptacount < 0) {
                                outDatas.push(v)
                            }
                        })
                    }
                    table.reload("list", {data: outDatas})
                    $("#allCount").html("合计" + outDatas.length + "条");
                }
            });


        })
</script>
</body>
</html>